<template>
    <el-dialog :show-close="false" :visible.sync="visible" top="calc(4rem + 4px)" width="100%">
        <div class="height-100b" style="background:#060316;">
            <el-row>
                <el-col :span="18">
                    <div class="height-100b position-relative">
                        <div id="player-long"></div>
                        <div :style="videoBg" class="player-bg height-100b"></div>
                        <div @click.stop="visible=false" class="close-label pd-8 color-fff cursor-pointer">
                            <i class="el-icon el-icon-close weight-bold" style="color:#606060;font-size:2vw"></i>
                        </div>
                        <div @click.stop="showPay" class="need-pay cursor-pointer" v-if="data.hasOwnProperty('creation') && data.creation[current_index].need_pay">
                            试看3分钟
                            <span class="pl-10 color-yellow-light">付费{{data.creation[current_index].fee}}{{$store.state.config.coin_name}}观看完整版</span>
                        </div>
                        <div class="need-recharge" style="z-index: 100000;" v-show="need_recharge">
                            <div class="need-recharge-close">
                                <i @click="need_recharge = false" class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                            </div>
                            <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover" style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                            <div class="mt-15 font-18 color-fff">{{$store.state.config.coin_name}}不足</div>
                            <div class="mt-5 color-fff font-13">{{$store.state.config.coin_name}}余额不足 请先充值</div>
                            <div @click="toRecharge" class="need-recharge-recharge cursor-pointer">立即充值</div>
                        </div>
                    </div>
                    <need-pay :creation="choose_creation" @donePay="donePay" @needRecharge="need_recharge=true" ref="pay"></need-pay>
                </el-col>
                <el-col :span="6">
                    <div class="height-100b" style="background:#060316;position:relative;z-index: 1000;padding-top:1vh">
                        <div class="font-18 position-relative pt-10 pb-10">
                            <div class="flex align-center">
                                <div :class="{'color-fff':active==0}" @click="scrollToSection('section1');active=0" class="cursor-pointer ml-30">视频</div>
                                <!-- <div :class="{'color-fff':active==1}" @click="scrollToSection('section2');active=1" class="ml-30 cursor-pointer">剧集</div>
                                <div :class="{'color-fff':active==2}" @click="scrollToSection('section3');active=2" class="ml-30 cursor-pointer">评论</div> -->
                            </div>
                            <div class="bottom-line"></div>
                            <div :style="activeLeft" class="bottom-line-active"></div>
                        </div>
                        <div class="pt-20 scroll-window">
                            <child-video :collection="data" @switchEpisode="switchEpisode" ref="info"></child-video>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>

<script>
import Player from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css'
import fullIcon from '@/assets/icon/video/full.png'
import mutedIcon from '@/assets/icon/video/muted_empty.png'
import mutedInvalidIcon from '@/assets/icon/video/muted_invalid_empty.png'
import { Events } from 'xgplayer'
import childVideo from './video.vue'
import needPay from './need-pay.vue'
export default {
    components: {
        childVideo,
        needPay,
    },
    data() {
        return {
            data: {},
            current_index: 0, //播放第几个视频
            player: null,
            visible: false,
            active: 0,
            need_recharge: false,
            choose_creation: {},
        }
    },
    props: {
        collection: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    watch: {
        visible(value) {
            if (!value) {
                this.current_index = 0
                this.need_recharge = false
                this.$refs.pay.visible = false
                this.active = 0
                this.player.pause()
            }
        },
    },

    computed: {
        videoBg() {
            if (this.data.hasOwnProperty('creation') && this.data.creation[this.current_index].first_frame) {
                return "background:url('" + this.data.creation[this.current_index].first_frame + "') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);"
            } else {
                return 'background:#eee'
            }
        },
        activeLeft() {
            return 'left:' + (this.active * 68 + 38) + 'px'
        },
    },
    methods: {
        donePay(value) {
            // let param = {
            //     value: value,
            //     index: this.index,
            // }
            // this.$emit('setMedia', param)
            console.log(value, 23423423423, this.data.creation[this.current_index], this.data)
            this.data.creation[this.current_index].need_pay = false
            this.data.creation[this.current_index].media_urls = value.media_urls
            this.data.creation[this.current_index].m3u8_media = value.m3u8_media
            this.init()
        },
        scrollToSection(sectionId) {
            const section = document.getElementById(sectionId)
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' })
            }
        },
        getCollection(id = null) {
            this.$request.get('/creation-collection/detail/' + (id ? id : this.collection.collection_id)).then((res) => {
                this.data = res
                this.init()
                this.$nextTick(() => {
                    this.$refs.info.creations = []
                    if (this.data.hasOwnProperty('creation') && this.data.creation[this.current_index]) {
                        this.$refs.info.episode = this.data.creation[this.current_index]
                    }
                    this.$refs.info.loadCreation()

                    this.$refs.info.data = []
                    this.$refs.info.beforeInit()
                })
            })
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        switchEpisode(item) {
            console.log('inint')

            this.$nextTick(() => {
                this.player.currentTime = 0
                // let has_hls = this.hasHlsPlugin()
                this.data.creation.forEach((value, index) => {
                    if (value.episode === item.episode) {
                        this.current_index = index
                        this.$refs.info.episode = this.data.creation[this.current_index]
                        this.init()
                        if (value.need_pay) {
                            this.player.src = value.preview_media
                        } else {
                            if (value.m3u8_media) {
                                this.player.src = value.m3u8_media
                            } else {
                                // pluginRule
                                this.player.src = value.media_urls[0]
                            }
                        }
                        this.$nextTick(() => {
                            this.$refs.info.data = []
                            this.$refs.info.beforeInit()
                            this.player.reload()
                        })
                        return true
                    }
                })
            })
        },
        hasHlsPlugin() {
            let has_hls = false
            this.player.config.plugins.forEach((plugin) => {
                if (plugin.name == 'HlsPlugin2') {
                    has_hls = true
                    return true
                }
            })
        },
        showPay() {
            this.player.pause()
            this.$refs.pay.visible = true
        },
        init() {
            if (this.player) {
                this.player.destroy(false)
                this.player = null
            }
            if (this.data.creation[this.current_index].preview_media != '' && this.data.creation[this.current_index].need_pay) {
                //需要付费
                let url_list = []
                this.data.creation.forEach((item, index) => {
                    if (index > 0) {
                        if (item.preview_media) {
                            url_list.push(item.preview_media)
                        } else {
                            url_list.push(item.m3u8_media ? item.m3u8_media : item.media_urls[0])
                        }
                    }
                })
                this.choose_creation = this.data.creation[this.current_index]
                this.player = new Player({
                    id: 'player-long',
                    url: this.data.creation[this.current_index].preview_media,
                    autoplay: true,
                    fluid: true,
                    plugins: [HlsPlayer],
                    ignores: ['replay'],
                    cssFullscreen: false,
                    playbackRate: [0.5, 1, 1.5, 2],
                    controls: true,
                    playNext: {
                        urlList: url_list,
                    },
                    pluginRule: true,
                    // marginControls: true,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                    icons: {
                        fullscreen: fullIcon,
                        volumeMuted: mutedIcon,
                        volumeLarge: mutedInvalidIcon,
                        volumeSmall: mutedInvalidIcon,
                    },
                })
                let that = this
                this.player.on(Events.ENDED, () => {
                    that.$refs.pay.visible = true
                })
            } else {
                //不需要视频
                let url_list = []
                this.data.creation.forEach((item, index) => {
                    if (index > 0) {
                        if (item.preview_media) {
                            url_list.push(item.preview_media)
                        } else {
                            url_list.push(item.m3u8_media ? item.m3u8_media : item.media_urls[0])
                        }
                    }
                })
                let my_plugin = []
                if (this.data.creation[this.current_index].m3u8_media) {
                    my_plugin = [HlsPlayer]
                }
                this.player = new Player({
                    id: 'player-long',
                    url: this.data.creation[this.current_index].m3u8_media ? this.data.creation[this.current_index].m3u8_media : this.data.creation[this.current_index].media_urls[0],
                    autoplay: true,
                    fluid: true,
                    plugins: my_plugin,
                    ignores: ['replay'],
                    cssFullscreen: false,
                    playbackRate: [0.5, 1, 1.5, 2],
                    controls: true,
                    playNext: {
                        urlList: url_list,
                    },
                    pluginRule: true,
                    // marginControls: true,
                    commonStyle: {
                        playedColor: '#ffffff',
                        cachedColor: 'transparent',
                        sliderBtnStyle: {
                            background: '#fff',
                        },
                    },
                    icons: {
                        fullscreen: fullIcon,
                        volumeMuted: mutedIcon,
                        volumeLarge: mutedInvalidIcon,
                        volumeSmall: mutedInvalidIcon,
                    },
                })
                let that = this
                this.player.on('seeking', function (data) {
                    that.current_index++
                })
            }
        },
        payFor() {},
    },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header {
    padding: 0;
}
/deep/.el-dialog__body {
    padding: 0;
    height: calc(100% - (4rem + 4px));
}
/deep/.el-dialog {
    margin: 0;
    width: 100%;
    height: calc(100vh - 4rem - 4px);
    background: transparent;
    // overflow-y: hidden;
}
/deep/.el-dialog__body {
    margin-top: calc(4rem + 4px);
    height: 100%;
    overflow-y: hidden;
}
/deep/.el-progress-bar__outer {
    height: 2px !important;
    background: #999 !important;
    border-radius: 0px !important;
}
/deep/.xgplayer .xg-pos {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
}
/deep/.xg-left-grid {
    margin-left: 10px;
}
/deep/.xg-right-grid {
    margin-right: 10px;
}
/deep/.xg-get-fullscreen,
/deep/.xg-volume,
/deep/.xg-volume-small,
/deep/.xg-volume-mute {
    width: 24px !important;
}
// /deep/.el-tabs__item {
//     color: #8b8b8b;
//     font-size: calc(0.89286vw + 1.14286px);
// }
// /deep/.el-tabs__item.is-active {
//     color: #ffffff;
// }
// /deep/.el-tabs__active-bar {
//     background: #fff;
//     width: 30px !important;
//     margin-left: 4px !important;
//     height: 1px;
// }
// /deep/.el-tabs__nav-wrap::after {
//     content: '';
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     width: 100%;
//     height: 1px;
//     background-color: #313131;
//     z-index: 1;
// }
// /deep/.el-tabs__nav {
//     margin-left: 30px;
// }
.bottom-line {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 1px;
    background: #3f3f3f;
    &-active {
        position: absolute;
        bottom: 0;
        height: 1px;
        background: #fff;
        width: 22px;
        transition: 0.3s all;
    }
}
.el-row,
.el-col,
/deep/#player-long {
    height: 100% !important;
    z-index: 100;
    background: transparent;
}
/deep/.xgplayer {
    padding-top: 0 !important;
}
/deep/.xgplayer-controls {
    background: #060316 !important;
}
.player-bg {
    background-size: 100% 100% !important;
    position: absolute;
    top: 0;
    width: 100%;
}
.close-label {
    position: absolute;
    border-radius: 100%;
    background: #060316;
    top: 30px;
    left: 40px;
    z-index: 10001;
    background: rgba(255, 255, 255, 0.6);
}
.close-label:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.need-pay {
    position: absolute;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    top: 20px;
    right: 20px;
    border-radius: 5px;
    z-index: 1000;
}
.need-recharge {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ff5994, #ff1c6d);
    width: 200px;
    height: 210px;
    left: calc(50% - 100px);
    top: calc(50% - 105px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    &-recharge {
        position: absolute;
        bottom: 15px;
        color: #ff1c6d;
        background: #fff;
        width: 80%;
        text-align: center;
        padding: 5px 0px;
        border-radius: 4px;
    }
}
.scroll-window {
    overflow: scroll;
    height: calc(86vh - 50px);
}
.scroll-window::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
}
/deep/#player-long video {
    height: calc(100% - 48px) !important;
}
</style>